<main>
    <form nz-form [formGroup]="validateForm">
        <h3>基础信息</h3>
        <nz-form-item>
            <nz-form-label [nzSm]="3" nzFor="abbreviation" nzRequired>
                简称
            </nz-form-label>
            <nz-form-control nzFlex="400px">
                <input type="text" nz-input placeholder="请输入" [maxlength]="20" formControlName="abbreviation">
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="3">企业名称</nz-form-label>
            <nz-form-control nzFlex="400px">
                <input type="text" nz-input placeholder="请输入" [maxlength]="50" formControlName="name">
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="3" nzFor="type" nzRequired>
                类型
            </nz-form-label>
            <nz-form-control nzFlex="400px">
                <nz-select nzPlaceHolder="请选择" formControlName="type">
                    <nz-option *ngFor="let item of supplier_type" nzValue="{{item.value}}" nzLabel="{{item.label}}">
                    </nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="3" nzFor="state" nzRequired>
                状态
            </nz-form-label>
            <nz-form-control>
                <a nz-tooltip nzTooltipTitle="{{stateInfo()}}" nzTooltipPlacement="topRight">
                    <nz-radio-group [(ngModel)]="state" formControlName="state">
                        <label nz-radio nzValue="0" [nzDisabled]="draft">草稿</label>
                        <label nz-radio nzValue="1" [nzDisabled]="normal">正常</label>
                        <label nz-radio nzValue="2" [nzDisabled]="frozen">冻结</label>
                        <label nz-radio nzValue="3" [nzDisabled]="endOfCooperation">合作结束</label>
                        <label nz-radio nzValue="4" [nzDisabled]="contractExpired">合同过期</label>
                    </nz-radio-group>
                </a>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="3" [nzXs]="6">
                备注
            </nz-form-label>
            <nz-form-control nzFlex="400px">
                <textarea rows="4" nz-input="" placeholder="仅内部可见" [maxlength]="100" ng-reflect-name="remark"
                    formControlName="remark"></textarea>
            </nz-form-control>
        </nz-form-item>

        <!-- ************ 公司信息 START ************ -->
        <h3>公司信息</h3>
        <!-- 营业执照 -->
        <nz-form-item>
            <nz-form-label [nzSm]="3">营业执照</nz-form-label>
            <nz-form-control nzFlex="150px">
                <label for="licenseFile" class="contractFile">
                    <span>选择文件</span>
                    <input id="licenseFile" type="file" accept="/*" (change)="handleFileInput($event,3)">
                </label>
            </nz-form-control>
            <p>请选择图片、office文件、PDF文件</p>
        </nz-form-item>
        <nz-form-item *ngIf="licenseFileList.length">
            <nz-form-label [nzSm]="3"></nz-form-label>
            <nz-form-control>
                <ul class="fileList">
                    <li *ngFor="let data of licenseFileList; index as i">
                        <span>{{ data.name }}</span>
                        <div class="fileBtn">
                            <a nz-button nz-button-tdlink nzType="link" (click)="downLoadFile(data.url)">下载</a>
                            <a nz-button nz-button-tdlink nzType="link" (click)="deleteLoadFile(data.i, licenseFileList)">删除</a>
                        </div>
                    </li>
                </ul>
            </nz-form-control>
        </nz-form-item>
        <!-- 统一社会信用代码 -->
        <nz-form-item>
            <nz-form-label [nzSm]="3">统一社会信用代码</nz-form-label>
            <nz-form-control nzFlex="400px">
                <input nz-input type="text" placeholder="请输入" formControlName="tax">
            </nz-form-control>
        </nz-form-item>
        <!-- 法定代表人 -->
        <nz-form-item>
            <nz-form-label [nzSm]="3">法定代表人</nz-form-label>
            <nz-form-control nzFlex="400px">
                <input nz-input type="text" placeholder="请输入" formControlName="juridicalPerson">
            </nz-form-control>
        </nz-form-item>
        <!-- 法人身份证 -->
        <nz-form-item>
            <nz-form-label [nzSm]="3">法人身份证</nz-form-label>
            <nz-form-control nzFlex="150px">
                <label for="idcardFile" class="contractFile">
                    <span>选择文件</span>
                    <input id="idcardFile" type="file" accept="/*" (change)="handleFileInput($event,4)">
                </label>
            </nz-form-control>
            <p>请选择图片、office文件、PDF文件</p>
        </nz-form-item>
        <nz-form-item *ngIf="idcardFileList.length">
            <nz-form-label [nzSm]="3"></nz-form-label>
            <nz-form-control>
                <ul class="fileList">
                    <li *ngFor="let data of idcardFileList; index as i">
                        <span>{{ data.name }}</span>
                        <div class="fileBtn">
                            <a nz-button nz-button-tdlink nzType="link" (click)="downLoadFile(data.url)">下载</a>
                            <a nz-button nz-button-tdlink nzType="link" (click)="deleteLoadFile(data.i, idcardFileList)">删除</a>
                        </div>
                    </li>
                </ul>
            </nz-form-control>
        </nz-form-item>
        <!-- 成立日期 -->
        <nz-form-item>
            <nz-form-label [nzSm]="3">成立日期</nz-form-label>
            <nz-form-control nzFlex="400px">
                <div ngDefaultControl formControlName="establishTime">
                    <nz-date-picker nzMode="date" [(ngModel)]="establishDates" [ngModelOptions]="{ standalone: true }" (ngModelChange)="onChange($event, 'establishTime')"></nz-date-picker>
                </div>
            </nz-form-control>
        </nz-form-item>
        <!-- 注册资本 -->
        <nz-form-item>
            <nz-form-label [nzSm]="3">注册资本</nz-form-label>
            <nz-form-control nzFlex="400px">
                <!-- <input nz-input type="number" placeholder="请输入" formControlName="registeredCapital"> -->
                <nz-input-number style="width: 149px;" formControlName="registeredCapital" [nzStep]="1" nzPlaceHolder="请输入"></nz-input-number>
                <span class="tip-sp">万元</span>
            </nz-form-control>
        </nz-form-item>
        <!-- 注册地址 -->
        <nz-form-item>
            <nz-form-label [nzSm]="3">注册地址</nz-form-label>
            <nz-form-control nzFlex="400px">
                <textarea rows="4" nz-input placeholder="请输入" [maxlength]="100" formControlName="registeredAddress"></textarea>
            </nz-form-control>
        </nz-form-item>
        <!-- ************ 公司信息 END ************ -->

        <h3>联系人信息</h3>
        <nz-form-item>
            <nz-form-label [nzSm]="3">
                联系人
            </nz-form-label>
            <nz-form-control nzFlex="400px">
                <input nz-input type="text" placeholder="请输入" [maxlength]="20" formControlName="contacts">
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="3">
                联系方式
            </nz-form-label>
            <nz-form-control nzFlex="400px">
                <input nz-input type="text" placeholder="请输入" [maxlength]="20" formControlName="phoneNumber">
            </nz-form-control>
        </nz-form-item>

        <!-- 邮箱 -->
        <nz-form-item>
            <nz-form-label [nzSm]="3">邮箱</nz-form-label>
            <nz-form-control nzFlex="400px">
                <input nz-input type="text" placeholder="请输入" [maxlength]="24" formControlName="email">
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-label [nzSm]="3">地区</nz-form-label>
            <nz-form-control nzFlex="400px">
                <div ngDefaultControl formControlName="districtId">
                    <nz-cascader [nzOptions]="areaList" [(ngModel)]="modalForm.districtId" [ngModelOptions]="{ standalone: true }" [nzAllowClear]="true"
                        nzPlaceHolder="请选择">
                    </nz-cascader>
                </div>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="3">详细地址</nz-form-label>
            <nz-form-control nzFlex="400px">
                <textarea formControlName="detailedAddress" nz-input rows="4" placeholder="请输入" [maxlength]="100"></textarea>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="3">消息提醒</nz-form-label>
            <nz-form-control nzFlex="400px">
                <textarea
                    formControlName="remindMsg"
                    nz-input
                    rows="4"
                    placeholder="请输入"
                ></textarea>
            </nz-form-control>
        </nz-form-item>

        <h3>合同信息</h3>
        <nz-form-item>
            <nz-form-label [nzSm]="3">合同文件</nz-form-label>
            <nz-form-control nzFlex="150px">
                <label for="contractFile" class="contractFile">
                    <span>选择文件</span>
                    <input id="contractFile" type="file" accept="/*" (change)="handleFileInput($event,1)">
                </label>
            </nz-form-control>
            <p>请选择图片、office文件、PDF文件</p>
            <br />
        </nz-form-item>
        <nz-form-item *ngIf="fileList.length">
            <nz-form-label [nzSm]="3"></nz-form-label>
            <nz-form-control>
                <ul class="fileList">
                    <li *ngFor="let data of fileList; index as i">
                        <span>{{ data.name }}</span>
                        <div class="fileBtn">
                            <a nz-button nz-button-tdlink nzType="link" (click)="contractFileDown(data.url)">下载</a>
                            <a nz-button nz-button-tdlink nzType="link" (click)="deleteContractFile(data.id)">删除</a>
                        </div>
                    </li>
                </ul>
            </nz-form-control>
        </nz-form-item>

        <!-- 我司签约人 -->
        <nz-form-item>
            <nz-form-label [nzSm]="3">我司签约人</nz-form-label>
            <nz-form-control nzFlex="400px">
                <input nz-input type="text" placeholder="请输入" formControlName="signatory">
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-label [nzSm]="3">合同生效日期</nz-form-label>
            <nz-form-control nzFlex="150px">
                <div ngDefaultControl formControlName="createTime">
                    <nz-date-picker nzFormat="yyyy-MM-dd" [(ngModel)]="createTime" [ngModelOptions]="{standalone: true}" (ngModelChange)="onChange($event, 'createTime')"></nz-date-picker>
                </div>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="3">合同失效日期</nz-form-label>
            <nz-form-control nzFlex="150px">
                <div ngDefaultControl formControlName="endTime">
                    <nz-date-picker nzFormat="yyyy-MM-dd" [(ngModel)]="time" [ngModelOptions]="{standalone: true}" (ngModelChange)="onChange($event, 'endTime')"></nz-date-picker>
                </div>
            </nz-form-control>
            <i nz-icon nz-tooltip nzType="exclamation-circle" nzTheme="outline" [nzTooltipTitle]="endTime"
                nzTooltipPlacement="right"></i>
            <ng-template #endTime>
                <span>当到达该日期的时候，供应商状态会自动改变</span>
            </ng-template>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="3">合同附件</nz-form-label>
            <nz-form-control nzFlex="150px">
                <label for="file" class="upFile">
                    <span>选择文件</span>
                    <input id="file" type="file" multiple="multiple" accept="/*" (change)="handleFileInput($event,2)">
                </label>
            </nz-form-control>
            <p>请选择图片、office文件、PDF文件，可多个文件</p>
        </nz-form-item>
        <nz-form-item *ngIf="fileList2.length">
            <nz-form-label [nzSm]="3"></nz-form-label>
            <nz-form-control>
                <ul class="fileList">
                    <li *ngFor="let data of fileList2; index as i">
                        <span>{{ data.name }}</span>
                        <div class="fileBtn">
                            <a nz-button nz-button-tdlink nzType="link" (click)="fileDown(data.url)">下载</a>
                            <a nz-button nz-button-tdlink nzType="link" (click)="deleteFile(data.id)">删除</a>
                        </div>
                    </li>
                </ul>
            </nz-form-control>
        </nz-form-item>

        <h3>账户信息</h3>
        <nz-form-item>
            <nz-form-label [nzSm]="3">
                结算方式
            </nz-form-label>
            <nz-form-control nzFlex="400px">
                <nz-select nzPlaceHolder="请选择" formControlName="settlementType">
                    <nz-option *ngFor="let item of supplier_settlement_type" nzValue="{{item.value}}"
                        nzLabel="{{item.label}}">
                    </nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="3">公司名称</nz-form-label>
            <nz-form-control nzFlex="400px">
                <input type="text" nz-input placeholder="请输入" [maxlength]="50" formControlName="companyName">
            </nz-form-control>
        </nz-form-item>
        <!-- <nz-form-item>
            <nz-form-label [nzSm]="3">
                税号
            </nz-form-label>
            <nz-form-control nzFlex="400px">
                <input nz-input type="text" placeholder="请输入" [maxlength]="20" formControlName="tax">
            </nz-form-control>
        </nz-form-item> -->
        <!-- <nz-form-item>
            <nz-form-label [nzSm]="3">
                单位地址
            </nz-form-label>
            <nz-form-control nzFlex="400px">
                <input nz-input type="text" placeholder="请输入" [maxlength]="100" formControlName="address">
            </nz-form-control>
        </nz-form-item> -->
        <!-- <nz-form-item>
            <nz-form-label [nzSm]="3">
                电话
            </nz-form-label>
            <nz-form-control nzFlex="400px">
                <input nz-input type="text" placeholder="请输入" [maxlength]="20" formControlName="telephone">
            </nz-form-control>
        </nz-form-item> -->
        <nz-form-item>
            <nz-form-label [nzSm]="3">
                银行账号
            </nz-form-label>
            <nz-form-control nzFlex="400px">
                <input nz-input type="text" placeholder="请输入" [maxlength]="20" formControlName="bankAccount">
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="3">
                开户行
            </nz-form-label>
            <nz-form-control nzFlex="400px">
                <input nz-input type="text" placeholder="请输入" [maxlength]="20" formControlName="bank">
            </nz-form-control>
        </nz-form-item>
        <!-- 开户行地址 -->
        <nz-form-item>
            <nz-form-label [nzSm]="3">开户行地址</nz-form-label>
            <nz-form-control nzFlex="400px">
                <textarea nz-input rows="4" placeholder="请输入" [maxlength]="100" formControlName="bankAddress"></textarea>
            </nz-form-control>
        </nz-form-item>
        <!-- 账户附件 -->
        <nz-form-item>
            <nz-form-label [nzSm]="3">账户附件</nz-form-label>
            <nz-form-control nzFlex="150px">
                <label for="accountFile" class="upFile">
                    <span>选择文件</span>
                    <input id="accountFile" type="file" multiple="multiple" accept="/*" (change)="handleFileInput($event,5)">
                </label>
            </nz-form-control>
            <p>请选择图片、office文件、PDF文件，可多个文件</p>
        </nz-form-item>
        <nz-form-item *ngIf="accountFileList.length">
            <nz-form-label [nzSm]="3"></nz-form-label>
            <nz-form-control>
                <ul class="fileList">
                    <li *ngFor="let data of accountFileList; index as i">
                        <span>{{ data.name }}</span>
                        <div class="fileBtn">
                            <a nz-button nz-button-tdlink nzType="link" (click)="downLoadFile(data.url)">下载</a>
                            <a nz-button nz-button-tdlink nzType="link" (click)="deleteLoadFile(data.i, accountFileList)">删除</a>
                        </div>
                    </li>
                </ul>
            </nz-form-control>
        </nz-form-item>

        <h3>业务服务费信息</h3>
        <nz-form-item>
            <nz-form-label [nzSm]="3">二手商城服务费</nz-form-label>
            <nz-form-control nzFlex="400px">
                <nz-input-number
                    style="width: 200px;"
                    [nzMin]="0"
                    [nzMax]="100"
                    [nzStep]="1"
                    nzPlaceHolder="请输入"
                    formControlName="usedServiceFee">
                </nz-input-number>
                <span class="p-l-6">%</span>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-label [nzSm]="3">配件商城服务费</nz-form-label>
            <nz-form-control nzFlex="400px">
                <nz-input-number
                    style="width: 200px;"
                    [nzMin]="0"
                    [nzMax]="100"
                    [nzStep]="1"
                    nzPlaceHolder="请输入"
                    formControlName="partsServiceFee">
                </nz-input-number>
                <span class="p-l-6">%</span>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-label [nzSm]="3">分账接收方</nz-form-label>
            <nz-form-control nzFlex="400px">
                <nz-select
                    nzShowSearch
                    nzAllowClear
                    nzPlaceHolder="请选择分账接收方"
                    formControlName="separateType">
                    <nz-option nzLabel="商户" [nzValue]="0"></nz-option>
                    <nz-option nzLabel="个人" [nzValue]="1"></nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-label [nzSm]="3">分账接收方账号</nz-form-label>
            <nz-form-control nzFlex="400px">
                <input nz-input placeholder="请输入分账接收方账号" formControlName="separateAccount" />
            </nz-form-control>
        </nz-form-item>
    </form>


    <div class="submit-box">
        <nz-divider></nz-divider>
        <div class="bt-box">
            <button nz-button nzType="primary" (click)="submitForm()">保存</button>
            &nbsp;
            <app-bt-group [btType]="'default'" [btText]="'返回'"></app-bt-group>
        </div>
    </div>
</main>